.fullpage-container {
  left: 0;
  top: 0;
  width: 100%;
  //height: 100vh;
}

.part {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  img {
    position: absolute;
    width: 100%;
    height: 100%;

    @media screen and (max-width: 780px) {
      width: auto;
      //clip: rect(0 150vw 100vh 50vw);
      left: -80vw;
    }
  }
}

.page {
  .title {
    position: relative;
    text-align: center;
    margin: 0 auto;
    top: 35vh;
    width: 80%;
    color: #fff;
    font-size: 1rem;
    z-index: 1;
    margin-left:10%;
    text-shadow: 2px 3px 10px #555;
    @media screen and (max-width: 780px) {
      /*font-size: .6rem;*/
      top: 38vh;
    }
  }
  .mask:after{
    opacity: .1;
  }
  .hoverButton {
    position: relative;
    top: 43vh;
    margin: 0 auto;
    font-size: .3rem;
  }

}

.bar {
  position: fixed;
  width: 1rem;
  right: 0.2rem;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  .item {
    margin: 0 auto;
    border-radius: .8rem;
    width: .15rem;
    height: .15rem;
    border: .03rem #fff solid;
    background-color: #fff;
    position: relative;
    margin-top: .2rem;
    opacity: .5;
    transition: opacity .5s;
    cursor: pointer;
  }
  .selected {
    opacity: 1;
    background-color: transparent;
  }
  .item:hover {
    opacity: .9;
  }
}
